<template>
  <div class="admin">
    <el-container>
      
      <el-container class="left">
        <el-aside class="menu" width="250px" style="background-color: #fff">
          <el-menu  :router="true" :default-active="$route.path">
            <el-submenu index="1">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>首页</span>
              </template>
              <el-menu-item index="/admin/index">首页</el-menu-item>
              <el-menu-item index="/admin/lunbotu">首页轮播图</el-menu-item>
            </el-submenu>
            
            <el-menu-item index="/admin/afoods">温岭美食</el-menu-item>
            <el-menu-item index="/admin/abeauty">温岭美景</el-menu-item>
            <el-menu-item index="/admin/afolklonric">温岭民俗 </el-menu-item>

          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="display:flex;">
        <h4 style="flex:1;">温岭百科后台管理</h4>
        <el-dropdown style="flex:1;text-align:right;">
          <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">修改密码</el-dropdown-item>
            <el-dropdown-item divided icon="el-icon-circle-plus" @click.native="back">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
          <!-- <el-footer>Footer</el-footer> -->
        </el-container>
      </el-container>
    </el-container>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '/admin/index',
      }
    },
    created() {
      this.setCurrentRoute();
    },
    watch: {
      $route() {
        this.setCurrentRoute();
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      setCurrentRoute() {
        this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
      },
      back() {
        this.$router.push({
          path: "/login",
          // query: { id: id },
        })
      }
    }
  }

</script>

<style lang="scss" scoped>

  .admin {
    width: 100%;
    height: 100%;
    background: rgb(241, 241, 241);
    .left{
      height:800px;
      margin:30px;
      .menu{
        box-shadow: 0 1px 4px rgba(0, 21, 41, .5);
      border-radius: 8px;
      }
    }

    .el-header {
      box-shadow: 0 1px 4px rgba(0, 21, 41, .5);
      // background: linear-gradient(to left, #4bafff, #4bb1ff);
      color: #333;
      line-height: 60px;
      z-index: 999;
      // margin-bottom: 2px;
    }

    .title-first {
      font-size: 36px;
      margin: 10px 25px 5px;
    }
    >>>.el-main{
      padding: 0;
    }

    .el-aside {
      // background-color: white;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    >>>.el-submenu__title::before {
      position: absolute;
      content: '';
      top: 3px;
      width: 4px;
      left: 0;
      height: 50px;
      background-image: linear-gradient(to left, #4bafff, #4bb1ff);
      transition: all 0.2s;
      // z-index: -1;
    }

  }

</style>
